{% extends 'layout/baseSite.html' %}
{% load static %}
{% block title %}语音问诊{% endblock %}
{% block title2 %}语音问诊{% endblock %}
{% block birc %}语音问诊{% endblock %}

{% block css %}
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container{
            height: 760px;
            width: 900px;
            border-radius: 4px;
            border: 0.5px solid #e0e0e0;
            background-color: #f5f5f5;
            display: flex;
            flex-flow: column;
            overflow: hidden;
        }
        .content{
            width: calc(100% - 40px);
            padding: 20px;
            overflow-y: scroll;
            flex: 1;
        }
        .content:hover::-webkit-scrollbar-thumb{
            background:rgba(0,0,0,0.1);
        }
        .bubble{
            max-width: 400px;
            padding: 10px;
            border-radius: 5px;
            position: relative;
            color: #000;
            word-wrap:break-word;
            word-break:normal;
        }
        .item-left .bubble{
            margin-left: 15px;
            background-color: #fff;
        }
        .item-left .bubble:before{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-top: 10px solid transparent;
            border-right: 10px solid #fff;
            border-bottom: 10px solid transparent;
            left: -20px;
        }
        .item-right .bubble{
            margin-right: 15px;
            background-color: #9eea6a;
        }
        .item-right .bubble:before{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid #9eea6a;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            right: -20px;
        }
        .item{
            margin-top: 15px;
            display: flex;
            width: 100%;
        }
        .item.item-right{
            justify-content: flex-end;
        }
        .item.item-center{
            justify-content: center;
        }
        .item.item-center span{
            font-size: 12px;
            padding: 2px 4px;
            color: #fff;
            background-color: #dadada;
            border-radius: 3px;
            -moz-user-select:none; /*火狐*/
            -webkit-user-select:none; /*webkit浏览器*/
            -ms-user-select:none; /*IE10*/
            -khtml-user-select:none; /*早期浏览器*/
            user-select:none;
        }

        .avatar img{
            width: 42px;
            height: 42px;
            border-radius: 50%;
        }
        .input-area{
            border-top:0.5px solid #e0e0e0;
            height: 100px;
            display: flex;
            flex-flow: column;
            background-color: #fff;
        }
        textarea{
            flex: 1;
            padding: 5px;
            font-size: 14px;
            border: none;
            cursor: pointer;
            overflow-y: auto;
            overflow-x: hidden;
            outline:none;
            resize:none;
        }
        .button-area{
            display: flex;
            height: 40px;
            margin-right: 10px;
            line-height: 40px;
            padding: 5px;
            justify-content: flex-end;
        }
        .button-area button{
            width: 80px;
            border: none;
            outline: none;
            border-radius: 4px;
            float: right;
            cursor: pointer;
        }

        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width:10px;
        }
        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
            border-radius:8px;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius:10px;
            background:rgba(0,0,0,0);
            -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
        }
    </style>

{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
        <div class="container">
            <div class="content">
                <div class="item item-center"><span>欢迎来到语音问诊界面。</span></div>
                {% if response %}
                    {% for sentence in response %}
                        {% if forloop.counter0|divisibleby:2 %}
                            <div class="item item-left">
                                <div class="avatar">
                                    <img src="{% static 'image/AIph.jpg' %}" />
                                </div>
                                <div class="bubble bubble-left">
                                    {{ sentence }}
                                </div>
                            </div>
                        {% else %}
                            <div class="item item-right">
                                <div class="bubble bubble-right">
                                    {{ sentence }}
                                </div>
                                <div class="avatar">
                                    <img src="{% static 'image/User.jpg' %}" />
                                </div>
                            </div>
                        {% endif %}
                        <br>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="input-area">
                <button id="startRecord">开始录音</button>
                <button id="stopRecord">停止录音</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
      $("#yyGo").addClass("active");
    </script>
    <script>
        let mediaRecorder;
        let chunks = [];

        // 获取音频输入并开始录音
        document.getElementById('startRecord').addEventListener('click', async () => {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.addEventListener('dataavailable', (e) => {
                chunks.push(e.data);
            });

            mediaRecorder.start();
        });

        // 停止录音并发送音频文件给后端
        document.getElementById('stopRecord').addEventListener('click', () => {
            mediaRecorder.stop();

            mediaRecorder.addEventListener('stop', () => {
                const blob = new Blob(chunks, { type: 'audio/wav' });

                const formData = new FormData();
                formData.append('audio', blob);
                formData.append('csrfmiddlewaretoken', '{{ csrf_token }}'); // 添加CSRF令牌

                fetch('/web/yuyin/', {
                    method: 'POST',
                    body: formData
                })
                .then(function (response){
                  if(response.ok){
                      location.reload();
                  }
                  else{
                      console.error('请求失败：' + response.status);
                  }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });
        });
    </script>
{% endblock %}